<template>
  <div class="notification-container">
    <n-card :title="typeJudge(info.type)" embedded>
      <template #header-extra>
        <n-tag round type="primary" v-if="info.is_read">已读</n-tag>
        <n-tooltip trigger="hover" v-else>
          <template #trigger>
            <n-button color="#333333" circle #icon @click="deleteNotify">
              <n-icon>
                <check-icon />
              </n-icon>
            </n-button>
          </template>
          已读
        </n-tooltip>
      </template>
      {{ info.message }}
    </n-card>
  </div>
</template>

<script setup lang='ts'>
import { CheckRound as CheckIcon } from '@vicons/material'

const props = defineProps([
  'info', 'index'
])

const emit = defineEmits(['deleteNotify'])

const typeJudge = ((type: number) => {
  switch (type) {
    case 1:
      return "新的关注"
    case 2:
      return "认证通知"
    default:
      return "新的评论"
  }
})

const deleteNotify = (() => {
  emit('deleteNotify', props.info.id, props.index)
})

</script>

<style scoped>
.notification-container {
  padding-bottom: 5px;
}

.n-card {
  break-inside: avoid;
  margin-bottom: 15px;
  border-radius: 25px;
}
</style>